<template>
    <div class="box">
        <JsContentTitle :pageTitle="state.pageTitle" :buttonData="state.buttonData"></JsContentTitle>
        <div class="contentView">
            <JsTable :total="state.totalCount" :dataSource="state.dataSource"
                :columns="state.columns" :refresh="state.refresh">
                <template #search-last>
                    <el-button @click="reset" type="primary" size="small">重置</el-button>
                </template>
            </JsTable>
        </div>
        <el-dialog v-model="state.detailDialogVisible" title="图书详情信息" width="500">
            <el-descriptions>
                <el-descriptions-item label="图书简介">{{ state.form.synopsis }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="state.detailDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="state.detailDialogVisible = false">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="state.returnDialogVisible" title="确认归还信息" width="500">
            <el-descriptions>
                <el-descriptions-item label="书名">{{ state.form.name }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
                <el-descriptions-item label="作者">{{ state.form.author }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions>
                <el-descriptions-item label="出版日期">{{ state.form.year_publication }}</el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="state.returnDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="returnSubmit">
                        归还
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
  </template>
  
  <script setup lang="ts">
  import { onMounted } from "vue"
  import { ref } from "vue"
  import { booksBorrowedList, bookReturn } from '@/api/return'
  import { ElMessage } from "element-plus";
  
  // 查询
  const search = () => {
    booksBorrowedList({}).then((res: any) => {
        state.value.dataSource = res.data.data
        state.value.totalCount = res.data.total
    })
  }
  // 归还
  const returnSubmit = () => {
    bookReturn(state.value.form.id).then((res: any) => {
        if (res.code === 0) {
            ElMessage({
                message: '图书归还成功',
                type: 'success',
            })
            search()
        } else {
            ElMessage({
                message: '图书归还失败',
                type: 'error'
            })
        }
    })
    state.value.returnDialogVisible = false;
  }
  
  const state = ref({
    buttonData: [],
    refresh: 0,
    totalCount: 0,
    pageTitle: '图书归还',
    form: {
        id: -1,
        author: '',
        name: '',
        synopsis: '',
        year_publication: '',
        created_at: new Date().toISOString().replace(/\.[\d]{3}Z$/, 'Z'),
        updated_at: '',
    },
    detailDialogVisible: false,
    returnDialogVisible: false,
    columns: {
        props: [
            {
                name: '书名',
                key: 'book_name',
            },
            {
                name: '作者',
                key: 'author',
            },
            {
                name: '借阅日期',
                key: 'borrow_at'
            },
            {
                name: '应还日期',
                key: 'return_at'
            },
            {
                name: '出版日期',
                key: 'year_publication',
            },
        ],
        options: {
            width: 150,
            btns: [
                {
                    label: '详情',
                    key: 'reset',
                    event: (params: any) => {
                        state.value.form.synopsis = params.synopsis
                        state.value.detailDialogVisible = true;
                    }
                },
                {
                    label: '归还',
                    key: 'return',
                    type: 'warning',
                    event: (params: any) => {
                        state.value.form.id = params.book_id
                        state.value.form.author = params.author
                        state.value.form.name = params.book_name
                        state.value.form.year_publication = params.year_publication
                        state.value.returnDialogVisible = true;
                    }
                },
            ],
        },
    },
    dataSource: [],
    tableEvent: {},
  } as any)
  
  onMounted(() => {
    search()
  })
  </script>
  
  <style lang="scss" scoped>
  *::-webkit-scrollbar {
    display: none;
    width: 10px;
  }
  
  .box {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
  
    .contentView {
        background-color: white;
        border-radius: 5px;
        height: calc(100vh - 144px);
        padding: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
  }
  </style>